<template>
    <basic-container>
        <div class="main-container" :style="{ height: screenHeight + 'px' }">
            <el-row>
                <el-col :span="12">
                    <div id="myChart1"></div>
                </el-col>
                <el-col :span="12">
                    <div id="myChart2"></div>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="20">
                    <div id="myChart3"></div>
                </el-col>
            </el-row>
        </div>
        <!-- <div v-for="(time,id) in data.data.records[id].slice(0,4)" :key="id"></div> -->
    </basic-container>
</template>

<script>
import * as echarts from 'echarts'
import { getZskListAll } from "@/api/sxdky/sxdky";
export default {

    name: 'hello',
    data() {
        return {
            msg: 'Welcome to Your Vue.js App',
            resultType0: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            resultType1: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            resultType2: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            resultType3: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            resultType4: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            resultLevel: [
                [0, 0, 0, 0], //今年
                [0, 0, 0, 0], //去年
                [0, 0, 0, 0],
                [0, 0, 0, 0],
                [0, 0, 0, 0],
            ],
            LevelType: ['gj', 'sj', 'bj', 'xj'],
            chart2Data: [
                new Date().getFullYear() - 4,
                new Date().getFullYear() - 3,
                new Date().getFullYear() - 2,
                new Date().getFullYear() - 1,
                new Date().getFullYear(),
            ]
        }

    },
    async mounted() {
        this.$nextTick(function () {
            var div = document.querySelector('.main-container');
            div.style.height = window.innerHeight + 'px';
            console.log('mounted: ', div);
            console.log('mounted: ', window.innerHeight);
        }),
            this.setScrollBar();

        // 浏览器缩放，更新ScrollBar位置
        window.addEventListener('resize', this.setScrollBar);
        await getZskListAll().then((res) => {
            res.data.data.filter((item) => {
                // 第一张饼图
                if (parseInt(item.createTime.substr(0, 4)) == new Date().getFullYear()) {
                    this.resultType0[parseInt(item.informationTypeKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 1)) {
                    this.resultType1[parseInt(item.informationTypeKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 2)) {
                    this.resultType2[parseInt(item.informationTypeKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 3)) {
                    this.resultType3[parseInt(item.informationTypeKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 4)) {
                    this.resultType4[parseInt(item.informationTypeKey)]++
                }
                // 第二章图 
                if (parseInt(item.createTime.substr(0, 4)) == new Date().getFullYear()) { //今年
                    this.resultLevel[0][this.LevelType.indexOf(item.informationLevelKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 1)) {
                    this.resultLevel[1][this.LevelType.indexOf(item.informationLevelKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 2)) {
                    this.resultLevel[2][this.LevelType.indexOf(item.informationLevelKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 3)) {
                    this.resultLevel[3][this.LevelType.indexOf(item.informationLevelKey)]++
                } else if (parseInt(item.createTime.substr(0, 4)) == (new Date().getFullYear() - 4)) {
                    this.resultLevel[4][this.LevelType.indexOf(item.informationLevelKey)]++
                }
            })
        })
        this.getPie()//饼图的初始化
        this.lineInit()//折线图的初始化
        this.getDom()//柱状图初始化
    },
    methods: {
        setScrollBar() {
            this.$nextTick(function () {
                var div = document.querySelector('.main-container');
                div.style.height = window.innerHeight - 200 + 'px';
                console.log('mounted: ', div);
                console.log('mounted: ', window.innerHeight);
            })

        },
        getPie() {
            // 绘制图表
            var myChart = echarts.init(document.getElementById('myChart1'))
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: '近一年科研资料类型占比',
                    // subtext: 'Fake Data',
                    left: 'center',
                    // left: '48%',
                    // top: '-10%',
                    // itemGap: 16,
                },
                grid: {
                    top: '10%',
                    left: '3%',
                    right: '4%',
                    bottom: '50%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    orient: 'vertical',
                    left: '10%',
                    top: '10%'
                },
                series: [
                    {
                        // name: 'Access From',
                        type: 'pie',
                        radius: '60%',
                        center: ['70%', '60%'],
                        data: [
                            { name: '论文', value: this.resultType0[0] },
                            { name: '软著', value: this.resultType0[1] },
                            { name: '专利', value: this.resultType0[2] },
                            { name: '技术报告', value: this.resultType0[3] },
                            { name: '作业指导书', value: this.resultType0[4] },
                            { name: '标准模板', value: this.resultType0[5] },
                            { name: '大纲方案', value: this.resultType0[6] },
                            { name: '计划资料', value: this.resultType0[7] },
                            { name: '分析报告', value: this.resultType0[8] },
                            { name: '总结报告', value: this.resultType0[9] },
                            { name: '检测报告', value: this.resultType0[10] },
                            { name: '其它', value: this.resultType0[11] },
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            }
            myChart.setOption(option);
            window.addEventListener("resize", () => {
                if (myChart) {
                    myChart.resize()
                }
            })
        },
        lineInit() {
            let myChart = echarts.init(document.getElementById('myChart2'))
            var option = {
                title: {
                    text: '近五年项目立项变化趋势(按项目级别)',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['国家级', '省级', '部级', '校级'],
                    top: 25,
                    right: 10,
                },
                grid: {
                    top: '30%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    scale: true, //自适应new Date().getFullYear()
                    // data: ['2017', '2018', '2019', '2020', '2021', '2022']
                    data: this.chart2Data

                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        name: '国家级',
                        type: 'line',
                        // stack: 'Total',
                        data: [this.resultLevel[4][0], this.resultLevel[3][0], this.resultLevel[2][0], this.resultLevel[1][0], this.resultLevel[0][0]]
                    },
                    {
                        name: '部级',
                        type: 'line',
                        // stack: 'Total',
                        data: [this.resultLevel[4][1], this.resultLevel[3][1], this.resultLevel[2][1], this.resultLevel[1][1], this.resultLevel[0][1]]
                    },
                    {
                        name: '省级',
                        type: 'line',
                        // stack: 'Total',
                        data: [this.resultLevel[4][2], this.resultLevel[3][2], this.resultLevel[2][2], this.resultLevel[1][2], this.resultLevel[0][2]]
                    },
                    {
                        name: '校级',
                        type: 'line',
                        // stack: 'Total',
                        data: [this.resultLevel[4][3], this.resultLevel[3][3], this.resultLevel[2][3], this.resultLevel[1][3], this.resultLevel[0][3]]
                    }
                ]
            };
            myChart.setOption(option);
            window.addEventListener("resize", () => {

                if (myChart) {

                    myChart.resize()

                }

            })
        },
        getDom() {
            let myChart = echarts.init(document.getElementById('myChart3'));
            let option = {
                title: {
                    text: '近五年各类资料数量',
                    // subtext: 'Fake Data',
                    top: 'top',
                    left: 'center',
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['论文', '软著', '专利', '技术报告', '作业指导书', '标准模板', '大纲方案', '计划资料', '分析报告', '总结报告', '检测报告', '其它'],
                    // top: 30,
                    // right: 50,
                    // 控制左右距离
                    x: 'center',
                    // 控制上下距离
                    y: '10%',
                    selected: {
                        '论文': true,
                        '软著': false,
                        '专利': false,
                        '技术报告': false,
                        '作业指导书': false,
                        '标准模板': false,
                        '大纲方案': false,
                        '计划资料': false,
                        '分析报告': false,
                        '总结报告': false,
                        '检测报告': false,
                        '其它': false,
                    }
                },
                grid: {
                    top: '30%',
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                toolbox: {
                    show: true,
                    feature: {
                        // dataView: { show: true, readOnly: false },
                        // magicType: { show: true, type: ['line', 'bar'] },
                        // restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                // calculable: true,
                xAxis: [
                    {
                        type: 'category',
                        // prettier-ignore
                        data: this.chart2Data
                    }
                ],
                yAxis: [
                    {
                        type: 'value'
                    }
                ],
                series: [
                    {
                        name: '论文',
                        type: 'bar',
                        data: [
                            this.resultType4[0],
                            this.resultType3[0],
                            this.resultType2[0],
                            this.resultType1[0],
                            this.resultType0[0],
                        ],
                    },
                    {
                        name: '软著',
                        type: 'bar',
                        data: [
                            this.resultType4[1],
                            this.resultType3[1],
                            this.resultType2[1],
                            this.resultType1[1],
                            this.resultType0[1],
                        ],
                    },
                    {
                        name: '专利',
                        type: 'bar',
                        data: [
                            this.resultType4[2],
                            this.resultType3[2],
                            this.resultType2[2],
                            this.resultType1[2],
                            this.resultType0[2],
                        ],
                    },
                    {
                        name: '技术报告',
                        type: 'bar',
                        data: [
                            this.resultType4[3],
                            this.resultType3[3],
                            this.resultType2[3],
                            this.resultType1[3],
                            this.resultType0[3],
                        ],
                    },
                    {
                        name: '作业指导书',
                        type: 'bar',
                        data: [
                            this.resultType4[4],
                            this.resultType3[4],
                            this.resultType2[4],
                            this.resultType1[4],
                            this.resultType0[4],
                        ],
                    },
                    {
                        name: '标准模板',
                        type: 'bar',
                        data: [
                            this.resultType4[5],
                            this.resultType3[5],
                            this.resultType2[5],
                            this.resultType1[5],
                            this.resultType0[5],
                        ],
                    },
                    {
                        name: '大纲方案',
                        type: 'bar',
                        data: [
                            this.resultType4[6],
                            this.resultType3[6],
                            this.resultType2[6],
                            this.resultType1[6],
                            this.resultType0[6],
                        ],
                    },
                    {
                        name: '计划资料',
                        type: 'bar',
                        data: [
                            this.resultType4[7],
                            this.resultType3[7],
                            this.resultType2[7],
                            this.resultType1[7],
                            this.resultType0[7],
                        ],
                    },
                    {
                        name: '分析报告',
                        type: 'bar',
                        data: [
                            this.resultType4[8],
                            this.resultType3[8],
                            this.resultType2[8],
                            this.resultType1[8],
                            this.resultType0[8],
                        ],
                    },
                    {
                        name: '总结报告',
                        type: 'bar',
                        data: [
                            this.resultType4[9],
                            this.resultType3[9],
                            this.resultType2[9],
                            this.resultType1[9],
                            this.resultType0[9],
                        ],
                    },
                    {
                        name: '检测报告',
                        type: 'bar',
                        data: [
                            this.resultType4[10],
                            this.resultType3[10],
                            this.resultType2[10],
                            this.resultType1[10],
                            this.resultType0[10],
                        ],
                    },
                    {
                        name: '其它',
                        type: 'bar',
                        data: [
                            this.resultType4[11],
                            this.resultType3[11],
                            this.resultType2[11],
                            this.resultType1[11],
                            this.resultType0[11],
                        ],
                    },
                ]
            };
            let triggerAction = function (action, selected) {
                let legend = [];
                for (let name in selected) {
                    if (selected.hasOwnProperty(name)) {
                        legend.push({ 'name': name });
                    } else {

                    }
                }
                myChart.dispatchAction({
                    type: action,
                    batch: legend
                });
            };
            let isFirstUnSelect = function (selected) {
                let unSelectedCount = 0;
                for (let name in selected) {
                    if (!selected.hasOwnProperty(name)) {
                        continue;
                    }
                    if (selected[name] === false) {
                        unSelectedCount++;
                    }
                }
                return unSelectedCount === 1;
            };

            // 所有都未选择，展示全部
            let isAllUnSelected = function (selected) {
                let selectedCount = 0;
                for (let name in selected) {
                    if (!selected.hasOwnProperty(name)) {
                        continue;
                    }
                    // selected对象内true代表选中，false代表未选中
                    if (selected[name] === true) {
                        selectedCount++;
                    }
                }
                return selectedCount === 0;
            };
            myChart.on('legendselectchanged', function (obj) {
                // debugger
                let selected = obj.selected;
                let legend = obj.name;
                // 使用legendToggleSelect动作将重新触发legendselectchanged事件，导致本函数重复运行从而丢失selected对象
                if (selected != undefined) {
                    if (isFirstUnSelect(selected)) {
                        triggerAction('legendToggleSelect', selected);

                    } else if (isAllUnSelected(selected)) {
                        triggerAction('legendSelect', selected);
                    }
                }
            });
            myChart.setOption(option, true);
            window.addEventListener("resize", () => {

                if (myChart) {

                    myChart.resize()

                }

            })
        }
    },
}
</script>

<style lang="less">


.main-container {

    // display: flex;
    .el-col,
    .el-row {
        height: 400px;
        // display: flex;
    }

    #myChart1,
    #myChart2 {
        width: 90%;
        display: inline-block;

    }

    #myChart1,
    #myChart2,
    #myChart3 {
        height: 400px;
    }

    width: 100%;
    //计算长度值，定义的宽度是多少calc()中的数字就是多少
    height: calc(100%); //动态计算长度值
    overflow-y:auto;
    overflow-x:hidden;
}
</style>